<template>
  <div v-loading="loading" class="exam-container">
    <px-button icon="ArrowLeft" type="primary" size="small" @click="backClick">返回 </px-button>
    <div class="result-title">考试结果</div>
    <div class="result-info">
      <px-descriptions :column="3" border class="content-bar">
        <px-descriptions-item label="考试名称">
          {{ resultData.examName }}
        </px-descriptions-item>
        <px-descriptions-item label="考生姓名">
          {{ resultData.examineeName }}
        </px-descriptions-item>
        <px-descriptions-item label="考试成绩">
          {{ resultData.score }}
        </px-descriptions-item>
        <px-descriptions-item label="开始时间">
          {{ resultData.startTime }}
        </px-descriptions-item>
        <px-descriptions-item label="结束时间">
          {{ resultData.endTime }}
        </px-descriptions-item>
        <px-descriptions-item label="考试耗时">
          {{ resultData.timeDifference }}
        </px-descriptions-item>
        <px-descriptions-item label="评卷人">
          {{ resultData.scorer }}
        </px-descriptions-item>
        <px-descriptions-item label="正确题数">
          {{ resultData.correctQuantity }}
        </px-descriptions-item>
        <px-descriptions-item label="错误题数">
          {{ resultData.wrongQuantity }}
        </px-descriptions-item>
      </px-descriptions>
    </div>
    <div v-if="questionsShow" class="result-title">错题列表</div>
    <div class="err-subject-list">
      <px-scrollbar>
        <div v-for="(item, index) in resultData.questions" :id="`subject${index}`" :key="item.id" class="subject">
          <div class="mg-b-8 flex-center">
            <span class="subject-type">[{{ item.questionTypeName }}]</span>
            <span class="subject-title" v-html="item.questionName" />
          </div>
          <px-radio-group v-if="item.questionType === 'S'" v-model="item.choice" disabled>
            <div v-for="option in item.options" :key="option.optionId" class="option">
              <px-radio :label="option.optionName"> {{ option.optionName }}. <span v-html="option.optionContent" /> </px-radio>
            </div>
          </px-radio-group>
          <px-radio-group v-if="item.questionType === 'T'" v-model="item.choice" disabled>
            <div v-for="option in item.options" :key="option.optionId" class="option">
              <px-radio :label="option.optionName"> {{ option.optionName }}. <span v-html="option.optionContent" /> </px-radio>
            </div>
          </px-radio-group>
          <px-checkbox-group v-if="item.questionType === 'M'" v-model="item.choice" disabled>
            <div v-for="option in item.options" :key="option.label" class="option">
              <px-checkbox :label="option.optionName"> {{ option.optionName }}. <span v-html="option.optionContent" /> </px-checkbox>
            </div>
          </px-checkbox-group>
          <div v-if="item.answer" class="correct-answer">参考答案：{{ item.answer }}</div>
        </div>
      </px-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getExamResultDetailAPI } from "@/api/knowledge/examManage";

const router = useRoute();
const routers = useRouter();

defineOptions({
  name: "ALL_KNOWLEDGE_EXAMMANAGE_EXAMREAULT"
});

const state = reactive({
  loading: false,
  resultData: {},
  examData: {}
});
const { loading, resultData } = toRefs(state);

const questionsShow = computed(() => state.resultData?.questions?.length > 0);
onMounted(() => {
  state.examData = router.query;
  getResult();
});

const getResult = async () => {
  try {
    const params = {
      examId: state.examData.examId,
      examineeId: state.examData.examineeId,
      clickSource: Number(state.examData.clickSource)
    };
    state.loading = true;
    const res = await getExamResultDetailAPI(params);
    // 把多选题的答案从字符串转变成数组。
    res?.questions?.forEach(item => {
      if (item?.questionType === "M") {
        item.choice = item?.choice?.split(",");
      }
    });
    state.resultData = res;
  } catch (error) {
    console.log(error);
  } finally {
    state.loading = false;
  }
};
const backClick = () => {
  routers.push({
    path: "/all/knowledge/examManage/myExam"
  });
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/knowledge/examManage/scss/common.scss");

:deep(.px-descriptions__label) {
  width: 100px;
}

:deep(.px-radio-group) {
  display: block;
}

:deep(.px-radio__input.is-checked + .px-radio__label) {
  color: #ef4444;
}

:deep(.px-checkbox__input.is-checked + .px-checkbox__label) {
  color: #ef4444;
}

.result-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
}

.result-info {
  margin-bottom: 32px;
}

.err-subject-list {
  width: 100%;
  height: calc(100vh - 420px);
  overflow-y: auto;
}

.subject {
  margin-bottom: 32px;

  .subject-type {
    margin-right: 8px;
    color: #999;
  }

  .subject-title {
    font-size: 16px;
    font-weight: 700;
  }

  .option {
    margin-left: 70px;
  }

  .correct-answer {
    margin-top: 32px;
    font-weight: 700;
  }
}

:deep(.px-radio .px-radio__label) {
  display: flex;
}

:deep(.px-checkbox .px-checkbox__label) {
  display: flex;
}
</style>
